<template>
  <div class="popup-mask">
    <div class="popup-container">
      <div class="popup-content">
        <div>编号: {{ id }}</div>
        <div>坐标: {{ coordinates.lat }}, {{ coordinates.lng }}</div>
      </div>

      <div class="popup-buttons">
        <button @click="closePopup">关闭</button>
        发送到GIS系统
        <button @click="confirmSend">发送</button>
      </div>

      <!-- 二次确认弹窗 -->
      <div v-if="showConfirm == 1" class="confirm-dialog">
        <p style="margin-bottom: 20px;">确定要发送吗？</p>
        <button @click="sendData">确认</button>
        <button style="margin-left: 30px;" @click="cancelConfirm">取消</button>
      </div>
      <div v-if="showConfirm == 2" class="confirm-dialog">
        <p style="margin-bottom: 20px;">发送成功！</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';

// 定义 props
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  coordinates: {
    type: Object,
    required: true,
    validator(value) {
      return typeof value.lat === 'number' && typeof value.lng === 'number';
    }
  }
});

// 定义事件
const emit = defineEmits(['close', 'send']);

// 控制是否显示二次确认弹窗
const showConfirm = ref(0);

// 关闭弹窗
const closePopup = () => {
  emit('close');
};

// 触发发送确认
const confirmSend = () => {
  showConfirm.value = 1;
};

// 取消发送确认
const cancelConfirm = () => {
  showConfirm.value = 0;
};

// 发送数据
const sendData = () => {
  console.log(props);

  // emit('send', { id: props.id, coordinates: props.coordinates });
  showConfirm.value = 2;
};
</script>

<style scoped>
.popup-mask {
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.popup-container {
  background-color: rgba(30, 64, 118, 0.747);
  padding: 20px;
  border-radius: 20px;
  width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.popup-content {
  margin-bottom: 15px;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
}

.confirm-dialog {
  margin-top: 45px;
  padding: 30px;
  background-color: rgba(53, 81, 126, 0.747);
  ;
  border-radius: 20px;
}

button {
  color: #fff;
  font-size: 18px;
  width: 80px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #ccc;
  line-height: 30px;
  background-color: #cccccc00;
}
</style>